<template>
	<view class="com">
		<view class="vui-pictxt" v-if="hasRes">
			<view :class="['vui-pictxt-list', isWater ? '' : 'pictxt-flex']">
				<block v-for="(it, k) in list1" :key="k">
					<view class="vui-list-i">
					  <view :data-type="it.is_video" class="pic" @click="goDetail(it.id)">
						<image :src="it.img" mode='widthFix' lazy-load="true" @error="imgError(k, 'p')"></image>
					  </view>
					  <text class="title clamp clamp-2">{{it.title}}</text>
					  <!-- <image src='../../static/9.png' lazy-load="true" class="isvideo" v-if="it.is_video == 1"></image> -->
					  <view class='author'>
						<view class="icon-txt">
						  <image :src="it.ava" lazy-load="true" @error="imgError(k, 'a')" class="col-3 icon" v-if="it.ava"></image>
						  <image class="icon no-img" v-else></image>
						  <text class="txt">{{it.name}}</text>
						  <!-- <image src="../../static/4.png" lazy-load="true" class="vip" v-if="it.grade == 1"></image>
						  <image src="../../static/51.png" lazy-load="true" class="vip" v-else-if="it.grade == 2"></image> -->
						</view>
						<view class="icon-txt" style='text-align: right;'>
						  <image src="../../static/nolike_icon.png" mode='widthFix' class="col-3 icon r"></image><text class="txt">{{it.zan}}</text>
						</view>
					  </view>
					</view>
				</block>
			</view>
			<view class="vui-pictxt-list" v-if="isWater">
				<block v-for="(it, k) in list2" :key="k">
					<view class="vui-list-i">
					  <view :data-type="it.is_video" class="pic" @click="goDetail(it.id)">
						<image :src="it.img" mode='widthFix' lazy-load="true" @error="imgError(k, 'p')"></image>
					  </view>
					  <text class="title clamp clamp-2">{{it.title}}</text>
					  <!-- <image src='../../static/9.png' lazy-load="true" class="isvideo" v-if="it.is_video == 1"></image> -->
					  <view class='author'>
						<view class="icon-txt">
						  <image :src="it.ava" mode='widthFix' lazy-load="true" @error="imgError(k, 'a')" class="col-3 icon" v-if="it.ava"></image>
						  <image class="icon no-img" v-else></image>
						  <text class="txt">{{it.name}}</text>
						  <!-- <image src="../../static/4.png" lazy-load="true" class="vip" v-if="it.grade == 1"></image>
						  <image src="../../static/51.png" lazy-load="true" class="vip" v-else-if="it.grade == 2"></image> -->
						</view>
						<view class="icon-txt" style='text-align: right;'>
						  <image src="../../static/nolike_icon.png" mode='widthFix' class="col-3 icon r"></image><text class="txt">{{it.zan}}</text>
						</view>
					  </view>
					</view>
				</block>
			</view>
		</view>
		<view class="nocont" v-else><text>暂无内容~</text></view>
		<view class="nomore" v-show="!isLoad"><text>没有更多了~</text></view>
	</view>
</template>

<script>
	export default {
		name: 'vui-pictxt',
		props: ['vuiData'],
		data() {
			return {
				isWater: false, //是否流体布局
				hasRes: false,
				isLoad: true,
				list1: [],
				list2: [],
				list1TotalH: 0,
				list2TotalH: 0,
			}
		},
		mounted() {},
		computed: {
			has() {
				const d = this.vuiData.lists;
				if(d.length) {
					this.hasRes = true;
				}
				this.isLoad = this.vuiData.isLoad;
				this.isWater = this.vuiData.isWater;
				if(this.isWater) {
					this.dataGroup(d);
				}else {
					d.forEach(item => {
						this.list1.push(item)
					})
				}
			}
		},
		methods: {
			/**
			 * @des 数据分组
			 */
			dataGroup(val) {
				const imgArr = [];
				val.forEach((item, index) => {
					uni.getImageInfo({
						src: item.img,
						success: (res) => {
							if(this.list1TotalH <= this.list2TotalH) {
								this.list1TotalH += res.height;
								this.list1.push(item);
							}else {
								this.list2TotalH += res.height;
								this.list2.push(item);
							}
						}
					})
				})
			},
			// 图片加载
			imgError(i, t) {
				let tmpLists = this.lists;
				if(t === 'p') {
					tmpLists[i].img = '../../static/default.jpg';
				}else if (t === 'a') {
					tmpLists[i].logo = '../../static/avatars_default.png';
				}
				this.lists = tmpLists;
			},
			/**
			 * @description 打开详情页
			 */
			goDetail(id) {
				uni.navigateTo({
					url: '../../pages/detail/index?id='+id
				})
			},
		}
	}
</script>

<style>
	.vui-pictxt {display: flex; justify-content: space-between; padding: 20upx 10upx;}
	
	/* 图标文字 */
	.icon-txt {position: relative; flex: 1; text-align: left;}
	.icon-txt .icon {width: 50upx; height: 50upx; border-radius: 100%;}
	.icon-txt .icon.r {border-radius: 0;}
	.icon-txt .txt {display: inline-block; padding-left: 10upx; line-height: 1; vertical-align: middle; text-align: left; color: #666666;}
	.icon-txt .vip {position: absolute; top: 55%; left: 18%; width: 20upx; height: 20upx; z-index: 99;}
	/* 图文列表 */
	.vui-pictxt .vui-pictxt-list {flex: 1; padding: 0 10upx;}
	.vui-pictxt .vui-pictxt-list .vui-list-i {position: relative; margin-bottom: 20upx; border: 1px solid #ddd; border-radius: 4px; background-color: #fff; break-inside:avoid;}
	.vui-pictxt .vui-pictxt-list .vui-list-i .pic image {max-height: 388upx; border-radius: 4px 4px 0 0;}
	.vui-pictxt .vui-pictxt-list .vui-list-i .isvideo {position: absolute; top: 26upx; right: 26upx; width: 50upx; height: 50upx; border-radius: 100%; z-index: 113;}
	.vui-pictxt .vui-pictxt-list .vui-list-i .title {display: block; width: 100%; padding: 10upx 13upx; text-align: left;}
	.vui-pictxt .vui-pictxt-list .vui-list-i .author {display: flex; align-items: center; padding: 5upx 13upx 20upx;}
	/* 非流体布局 */
	.vui-pictxt .vui-pictxt-list.pictxt-flex {display: flex; flex-wrap: wrap; margin: -1%;}
	.vui-pictxt .vui-pictxt-list.pictxt-flex .vui-list-i {flex: 0 0 48%; margin: 1%;}
	.vui-pictxt .vui-pictxt-list.pictxt-flex .pic {position: relative; height: 388upx; border-radius: 4px 4px 0 0; background-color: #f3f7f8;}
	.vui-pictxt .vui-pictxt-list.pictxt-flex .pic image {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
	
	.nocont {width: 100%; padding: 40upx 0; text-align: center; font-size: 32upx; color: #BEBEBE;}
</style>
